<template>
  <div>
    <div class="empty"></div>
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1bc92bd7fdb80c023c6887ae4f419e71.jpg?f=webp"
      class="img"
    />
    <div class="empty"></div>
    <div class="item">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b40029067abdfcc40bb6bde90b5d95d8.jpg?thumb=1&w=696&h=436"
        class="img"
      />
      <div class="databox">
        <div class="data1">
          <p class="itemp1">RedmiBook Air 13</p>
          <p class="itemp2"><span class="itemp2-span">￥</span>5199</p>
        </div>
        <div class="data2">
          <p class="itemp3">打开它，就像翻开一本杂志</p>
          <p class="itemp4">立即购买</p>
        </div>
      </div>
    </div>
    <div class="empty"></div>
    <div class="item">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84771bd0e6146ecbb6479735a4263ed5.jpg?thumb=1&w=696&h=436"
        class="img"
      />
      <div class="databox">
        <div class="data1">
          <p class="itemp1">小米显示器27英寸 165Hz版</p>
          <p class="itemp2"><span class="itemp2-span">￥</span>2199</p>
        </div>
        <div class="data2">
          <p class="itemp3">2K超清 | 165Hz刷新率 | 1ms IMBC快速响应 | ▲E＜2原色调校 | 一级能效</p>
          <p class="itemp4">立即购买</p>
        </div>
      </div>
    </div>
    <div class="empty"></div>
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a6c6904c72672a67f1ddb6d4938d414.jpg?f=webp"
      class="img"
    />
    <div class="empty"></div>
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aeb37b208fc7303d6a6e16b57e4e1942.jpg?f=webp"
      class="img"
    />
    <div class="empty"></div>
    <img
      src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e320df8ff307626d984f1708d3c961f2.jpg?f=webp"
      class="img"
    />
    <div class="empty"></div>
    <img class="img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ed0de51cddbd973e1ac2e27ba05a0693.jpg?f=webp" alt="">
    <div class="imgbox">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0d1ffaea355ab590ee88a48c9ab1ef0f.jpg?f=webp" class="img2">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d4e381d6664a0f4aa94984af7b676de5.jpg?f=webp" class="img2">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/400e740d63fe4f377b05a3c969f150bf.jpg?f=webp" class="img2">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1a1a44f1b6a7ed090eb624969845bd7e.jpg?f=webp" class="img2">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cd3044325d320007ec3c3444396287d.jpg?f=webp" class="img2">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21d72b6e96625e586e52ac3e6b0bfedc.jpg?f=webp" class="img2">
    </div>
  </div>
</template>

<style lang="less" scoped>
@textoverflow:{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
};
.empty {
  width: 100%;
  height: 0.8625rem;
  background-color: #4878a6;
}
.item{
  padding: 0 .375rem;
  background-color: #4878a6;
}
.img {
  width: 100%;
  display: block;
}
.databox {
  padding: 0.625rem 0.875rem;
  background-color: #fff;
}
.data1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.375rem
}
.itemp1 {
  @textoverflow();
}
.itemp2 {
  @textoverflow();
  font-size: 0.875rem;
  color: #ea625b;
  .itemp2-span {
    font-size: 0.75rem;
  }
}
.data2{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.9375rem
}
.itemp3 {
  @textoverflow();
  color: rgba(0, 0, 0, 0.54);
  font-size: .75rem;
  width: 14.375rem;
}
.itemp4 {
  @textoverflow();
  background: #ea625b;
  color: #fff;
  font-size: .8438rem;
  padding: .375rem 1.5625rem;
  border-radius:5px;
}
.imgbox{
  display: flex;
  flex-wrap: wrap;
}
.img2{
  width: 50%;
}
</style>
